<template>
  <div class="header">
    <div class="label-content" style="position: fixed;top: 52px; width: 100%">
      <span :class="{active: $route.name === 'recommend'}" @click="onChangePage('/recommend')">推荐</span>
      <span :class="{active: $route.name === 'back_end'}" @click="$router.push('/back_end')">后端</span>
      <span>前端</span>
      <span>Android</span>
      <span>IOS</span>
      <span>人工智能</span>
      <span>开发工具</span>
      <span>代码人生</span>
      <span>阅读</span>
    </div>
  <div style="padding-top: 120px"><router-view /></div>

  </div>
</template>

<script>
export default {
  name: "labelPage",
  methods: {
    onChangePage(url) {
      this.$router.push(url)
    }
  }
}
</script>

<style scoped>
.active{
  color: red;
}
.line-left-right{
  width: 100%;
  height: 1px;
  background-color: #d0d0d0;
}
.label-content span{
  padding: 10px 20px;
  line-height: 50px;
  font-size: 15px;
}
.label-content {
  height: 50px;
  background-color: #FFFFFF;
  margin-bottom: 20px;
  text-align: center;
}
</style>